<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rome</title>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        .clear-padding-row {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

        #tile1 {
            position: relative;
            left: 150px;
        }

        #tile2 {
            position: relative;
            left: 400px;
        }

        .panel-title {
            font-size: 20px;
        }

        .s1 {
            position: relative;
            left: 40px;
            font-size: 18px;
        }

        .s2 {
            position: relative;
            padding-left: 150px;
            font-size: 18px;
        }

        .s3 {
            position: relative;
            padding-left: 150px;
            font-size: 18px;
        }

        .s4 {
            position: relative;
            padding-left: 150px;
            font-size: 18px;
        }

        button {
            position: relative;
            top: 0px;
            width: 100px;
            left: 1007px;
        }

        th {
            text-align: center;
        }

        td {
            text-align: center;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <img src="img/logo.png" style="height: 64px;">
        </div>
    </div>
</nav>
<div id="app" class="container">
    <div class="row clear-padding-row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span class="panel-title" id="tile1">房间号：123456789</span>
                    <span class="panel-title" id="tile2">养成每天写java代码的习惯</span>
                </div>
                <div class="panel-body">
                    <span class="s1">当前人数：30</span>
                    <span class="s2">金库金额：150¥</span>
                    <span class="s3">当前平均金额：5¥</span>
                    <span class="s4">第3天</span>
                    <table class="table table-bordered">
                        <thead>
                        <th>用户名</th>
                        <th>签到文件</th>
                        <th>积分</th>
                        <th>签到</th>
                        <th>评论</th>
                        <th>备注</th>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in subjectlist">
                            <td>
                                {{item.user}}
                            </td>
                            <td>
                                {{item.file}}
                            </td>
                            <td>
                                {{item.integral}}
                            </td>
                            <td>
                                {{item.sign}}
                            </td>
                            <td>
                                点赞&nbsp;:{{item.dianzan}}&nbsp;&nbsp;&nbsp;
                                踩踩&nbsp;:{{item.caicai}}
                            </td>
                            <td>
                                {{item.beizhu}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-default btn-lg ">
                        <a href="sign.html">签到</a>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            subjectlist: [
                {
                    user: '用户1',
                    file: 'hello.java',
                    integral: 50,
                    sign: '签到成功',
                    dianzan: 5324,
                    caicai: 5235,
                    beizhu: '********'
                },
                {
                    user: '用户2',
                    file: 'test.java',
                    integral: 65,
                    sign: '签到成功',
                    dianzan: 6523,
                    caicai: 10050,
                    beizhu: '*********'
                },
                {
                    user: '用户2',
                    file: 'test.java',
                    integral: 65,
                    sign: '签到成功',
                    dianzan: 6523,
                    caicai: 10050,
                    beizhu: '*********'
                },
                {
                    user: '用户2',
                    file: 'test.java',
                    integral: 65,
                    sign: '签到成功',
                    dianzan: 6523,
                    caicai: 10050,
                    beizhu: '*********'
                },
                {
                    user: '用户2',
                    file: 'test.java',
                    integral: 65,
                    sign: '签到成功',
                    dianzan: 6523,
                    caicai: 10050,
                    beizhu: '*********'
                },
                {
                    user: '用户2',
                    file: 'test.java',
                    integral: 65,
                    sign: '签到成功',
                    dianzan: 6523,
                    caicai: 10050,
                    beizhu: '*********'
                }, {
                    user: '用户2',
                    file: 'test.java',
                    integral: 65,
                    sign: '签到成功',
                    dianzan: 6523,
                    caicai: 10050,
                    beizhu: '*********'
                }

            ]
        },
        mounted: function () {
            console.log("inited!!!")
        }

    });
</script>
</body>
</html>
